<template>
  <div style="width: 375px; overflow: hidden;">
    <!-- 头部搜索-->
    <div class="top">
      <HeadSearch></HeadSearch>
    </div>
    <div class="fixDown" style="position: relative;top: 58px; left: 0;">
      <!-- 轮播图 -->
      <Banner :bannerList="bannerList.bannerlist"></Banner>
      <!-- 口号 -->
      <div class="indexSlogan">
        <div class="sloganItem" v-for="item in policyDescList" :key="item.icon">
          <!-- <div class="itemImg" :style="background-image: `url(${item.icon})`"></div> -->
          <img :src="item.icon" class="itemImg" alt="">
          <span class="itemText">{{ item.desc }}</span>
        </div>
      </div>
      <!--导航分类  -->
      <div class="navClass" style="width: 100%;">
        <div class="classContainer">
          <router-link :to="`/davPage?categoryId=${arr[index]}`" class="containerItem" v-for="(item,index) in kingKongList" :key="item.picUrl" href="javascript:void(0)">
            <div class="itemIcon">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="itemText">{{ item.text }}</div>
          </router-link>
        </div>
      </div>
      <!-- 周年促销 -->
      <div class="promotion">
        <div class="promotionTop">
          <div class="topItem">
            <img src="././HeadSearch/img/t111.gif" alt="">
            <div class="itemImg">
              <img
                src="https://yanxuan-item.nosdn.127.net/b6c1b1d3c7a6a1a40d92991d8cf01f0b.png?imageView&thumbnail=168x0&quality=75"
                alt="">
            </div>
          </div>
        </div>
        <div class="promotionBottom">
          <div class="bottomItem">
            <div class="itemL">
              <img
                src="https://yanxuan-item.nosdn.127.net/54a2767366cbd6f367ef0352ff5c072a.png?quality=75&type=webp&imageView&thumbnail=160x160"
                alt="">
            </div>
            <div class="itemC">
              <img
                src="https://yanxuan-item.nosdn.127.net/85918b3f3b7dc4525c0a160d6f7fa650.png?quality=75&type=webp&imageView&thumbnail=160x160"
                alt="">
            </div>
            <div class="itemR">
              <img
                src="https://yanxuan-item.nosdn.127.net/9a33f08a3b0f5c06fdf4c586d51b2f7c.png?quality=75&type=webp&imageView&thumbnail=160x160"
                alt="">
            </div>
          </div>
        </div>
      </div>

      <!-- 新人专享礼 -->
      <div class="newPerson">
        <div class="title">
          <span class="txt">新人专享礼</span>
        </div>
        <div class="content">
          <div class="left">
            <div class="name">新人专享礼包</div>
            <div class="imgwrap">
              <image class="img" src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"></image>
            </div>
          </div>
          <div class="right">
            <div class="line1">
              <div class="detail">
                <div class="picture">
                  <image class="img"
                    src="https://yanxuan-item.nosdn.127.net/d321d9d51d6b742521eb4cfcd33d62b5.png?quality=75&type=webp&imageView&thumbnail=200x200">
                  </image>
                </div>
                <div class="discount">
                  <div class="title">¥17.9</div>
                  <div class="subtitle">¥19.9</div>
                </div>
              </div>
              <div class="cnt">
                <div class="title">
                  福利社
                </div>
                <div>今日特价</div>
              </div>
            </div>
            <div class="line2">
              <div class="detail">
                <div class="picture">
                  <image class="img"
                    src="https://yanxuan-item.nosdn.127.net/18daf84aa0ea093bfa7ff4a4961b238c.png?quality=75&type=webp&imageView&thumbnail=200x200">
                  </image>
                </div>
                <div class="discount">
                  <div class="title">¥200</div>
                  <div class="subtitle">¥269</div>
                </div>
              </div>
              <div class="cnt">
                <div class="title">
                  新人拼团
                </div>
                <div class="subtitle">1元起包邮</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 类目热销榜 -->
      <div class="categoryList">
        <div class="moduleTitle">
          <div class="title">类目热销榜</div>
        </div>
        <div class="content">
          <div class="line1">
            <router-link class="item-big item-1" v-for="i in categoryList?.splice(0, 2)" to="/saleCategory">
              <div class="name" style="color:#333">{{ i.categoryName }}</div>
              <img :src="i.picUrl" alt="" class="item-img">
            </router-link>
            <div class="line2">
              <router-link class="item" v-for="i in categoryList?.splice(0)" to="/saleCategory">
                <div class="name" style="color:#333">{{ i.categoryName }}</div>
                <img :src="i.picUrl" alt="" class="item-img">
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 为你精选 -->
      <div class="wellChosen" style="width: 100%;">
        <div class="chosenTitle">为你精选</div>
        <!-- 每一类商品列表 -->
        <div class="centerContent">
          <!-- 列表标题 -->
          <!-- <div class="centerContentHeader">
        <div class="text5">
          基础护肤
        </div>
        <div class="text6">
          高效补水，深层修护
        </div>
      </div> -->
          <!-- 详细商品卡片 -->
          <ul class="contentList">
            <!-- 单个商品卡片 -->
            <li class="contentGoods">
              <img
                src="https://yanxuan-item.nosdn.127.net/2a083f0c4d63433ad3271f591fa6da93.jpg?type=webp&imageView&quality=65&thumbnail=330x330"
                class="contentGoodImg">
              <div class="contentGoodText">
                <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo1"
                  :class="{ showNO: true }">
                紧致修护成分极简栀子花胶原眼部精华15ml
              </div>
              <div class="contentGoodRedpaper">
                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" class="logo2">
                <span>可用红包</span>
              </div>
              <div class="contentGoodPrice">
                到手￥<span class="text1">109</span>.5
                <del class="text2">¥199</del>
              </div>
              <div class="contentGoodActivity" :class="{ showWidth: true }">
                <img src="./img/b268d0d2f46c41d3b3edf5fa33eea3de.png" class="logo3">
                <div class="Text3">满69减20元</div>
                <div class="Text4">仅剩1天</div>
              </div>
              <img src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" class="logo4">
            </li>
            <li class="contentGoods">
              <img
                src="https://yanxuan-item.nosdn.127.net/2a083f0c4d63433ad3271f591fa6da93.jpg?type=webp&imageView&quality=65&thumbnail=330x330"
                class="contentGoodImg">
              <div class="contentGoodText">
                <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo1"
                  :class="{ showNO: true }">
                紧致修护成分极简栀子花胶原眼部精华15ml
              </div>
              <div class="contentGoodRedpaper">
                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" class="logo2">
                <span>可用红包</span>
              </div>
              <div class="contentGoodPrice">
                到手￥<span class="text1">109</span>.5
                <del class="text2">¥199</del>
              </div>
              <div class="contentGoodActivity" :class="{ showWidth: true }">
                <img src="./img/b268d0d2f46c41d3b3edf5fa33eea3de.png" class="logo3">
                <div class="Text3">满69减20元</div>
                <div class="Text4">仅剩1天</div>
              </div>
              <img src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" class="logo4">
            </li>
            <li class="contentGoods">
              <img
                src="https://yanxuan-item.nosdn.127.net/2a083f0c4d63433ad3271f591fa6da93.jpg?type=webp&imageView&quality=65&thumbnail=330x330"
                class="contentGoodImg">
              <div class="contentGoodText">
                <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo1"
                  :class="{ showNO: true }">
                紧致修护成分极简栀子花胶原眼部精华15ml
              </div>
              <div class="contentGoodRedpaper">
                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" class="logo2">
                <span>可用红包</span>
              </div>
              <div class="contentGoodPrice">
                到手￥<span class="text1">109</span>.5
                <del class="text2">¥199</del>
              </div>
              <div class="contentGoodActivity" :class="{ showWidth: true }">
                <img src="./img/b268d0d2f46c41d3b3edf5fa33eea3de.png" class="logo3">
                <div class="Text3">满69减20元</div>
                <div class="Text4">仅剩1天</div>
              </div>
              <img src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" class="logo4">
            </li>
            <li class="contentGoods">
              <img
                src="https://yanxuan-item.nosdn.127.net/2a083f0c4d63433ad3271f591fa6da93.jpg?type=webp&imageView&quality=65&thumbnail=330x330"
                class="contentGoodImg">
              <div class="contentGoodText">
                <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo1"
                  :class="{ showNO: true }">
                紧致修护成分极简栀子花胶原眼部精华15ml
              </div>
              <div class="contentGoodRedpaper">
                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" class="logo2">
                <span>可用红包</span>
              </div>
              <div class="contentGoodPrice">
                到手￥<span class="text1">109</span>.5
                <del class="text2">¥199</del>
              </div>
              <div class="contentGoodActivity" :class="{ showWidth: true }">
                <img src="./img/b268d0d2f46c41d3b3edf5fa33eea3de.png" class="logo3">
                <div class="Text3">满69减20元</div>
                <div class="Text4">仅剩1天</div>
              </div>
              <img src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" class="logo4">
            </li>
          </ul>
        </div>
      </div>
      <!-- 回到顶部 -->
      <van-back-top class="custom" style="--van-back-top-background:#ccc" offset='700' bottom="10vh"></van-back-top>
      <!-- 固定的礼物 -->
      <a class="fixGift">
        <div>
          <van-icon name="gift-o" class="gift1" color="#B4282D" size="35" />
        </div>
      </a>
      <!-- 底部栏 -->
      <Tabbar></Tabbar>
    </div>

  </div>
</template>

<script lang="ts">
import router from "@/router";
import { defineComponent } from "vue"
import { ref } from 'vue';
export default defineComponent({
    name: "Home",
})
</script>

<script lang="ts" setup>
import { onMounted, } from 'vue';
import { storeToRefs } from 'pinia';
import HeadSearch from './HeadSearch/index.vue'
import Banner from '../../components/Banner/index.vue'
import Tabbar from '@/components/Tabbar/index.vue';
import { useHomeStore } from '@/stores/home'
// import request from "@/api/request";
const bannerList = ref({
  bannerlist: [
    {
      id: 0,
      picUrl: "https://yanxuan.nosdn.127.net/static-union/168049032637b102.jpg",
      targetUrl: "https://act.you.163.com/act/pub/ssr/oYlNb1AiN5Ll.html?appConfig=1_1_1",
      extra: {}
    },
    {
      id: 0,
      picUrl: "https://yanxuan.nosdn.127.net/static-union/168048981137b102.jpg",
      targetUrl: "https://act.you.163.com/act/pub/ssr/vPCZw3uUKq1v.html?appConfig=1_1_1",
      extra: {}
    },
    {
      "id": 0,
      "picUrl": "https://yanxuan.nosdn.127.net/static-union/1680253444ea7c60.jpg",
      "targetUrl": "https://act.you.163.com/act/pub/ssr/AqxVCfYomOd2.html?appConfig=1_1_1&rankToken=5_2315_DMP_202303161000626",
      "extra": {}
    },
    {
      "id": 0,
      "picUrl": "https://yanxuan.nosdn.127.net/static-union/167945763837b102.jpg",
      "targetUrl": "https://act.you.163.com/act/pub/ssr/mOEjyFO8Kwma.html?appConfig=1_1_1",
      "extra": {}
    },
    {
      "id": 0,
      "picUrl": "https://yanxuan.nosdn.127.net/static-union/168016874037b102.jpg",
      "targetUrl": "https://act.you.163.com/act/pub/ssr/yvogvLiEs3fq.html?appConfig=1_1_1",
      "extra": {}
    }
  ]
})
// 数据中导航栏没有id
const arr = ref(['1005002', '1005000', '1010000', '1005002', '1013001', '1011000', '109243029', '1043000', '109320005', '1011000'])
const homeStore = useHomeStore()
let { policyDescList, kingKongList, categoryList, navData } = storeToRefs(homeStore)

onMounted(() => {
  homeStore.getHomeData()
  // homeStore.getCategoryList(1005000)
  homeStore.getNavData()

})

</script>

<style scoped lang="less">
// 固定的礼物
.fixGift {
  display: block;
  position: fixed;
  width: 70px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px 0 0 20px;
  // border: 1px solid red;
  bottom: 150px;
  right: 0;
  background-color: #fff;
  opacity: 0.8;
  text-align: center;

  div {
    display: inline-block;
    vertical-align: center;
  }




}

// top
.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
}

// 口号
.indexSlogan {
  padding: 0 15px;
  display: flex;
  align-items: center;
  height: 36px;

  .sloganItem {
    height: 21px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    flex-grow: 1;

    .itemImg {
      width: 16px;
      height: 16px;
    }

    .itemText {
      font-size: 12px;
      color: #333;
      margin-left: 4px;
      line-height: 21px;
    }
  }
}

// 导航分类 
.navClass {
  .classContainer {
    display: flex;
    flex-wrap: wrap;

    .containerItem {
      width: 55px;
      height: 78px;
      margin: 5px 10px 4.5px;

      .itemIcon {
        width: 55px;
        height: 55px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .itemText {
        margin-top: 5px;
        text-align: center;
        font-size: 12px;
        color: #333;
        line-height: 18px;
        white-space: nowrap;
      }
    }
  }
}

// 7周年促销 
.promotion {
  width: 375px;

  .promotionTop {
    .topItem {
      position: relative;

      img {
        width: 375px;
        height: 99px;
      }

      .itemImg {
        position: absolute;
        top: 10px;
        left: 40px;

        img {
          width: 84px;
          height: 84px;
        }
      }
    }
  }

  .promotionBottom {
    .bottomItem {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      .itemL {
        background-image: url('././HeadSearch/img/1qqq.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        width: 115.5px;
        height: 110px;

        // border:1px solid red;
        // position: relative;
        img {
          width: 70px;
          height: 70px;
          margin: 40px 30px 0;
        }
      }

      .itemC {
        background-image: url('././HeadSearch/img/2qqq.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        width: 115.5px;
        height: 110px;

        // border:1px solid red;
        // position: relative;
        img {
          width: 70px;
          height: 70px;
          // text-align: center;
          margin: 40px 30px 0;

        }
      }

      .itemR {
        background-image: url('././HeadSearch/img/3.qqq.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        width: 115.5px;
        height: 110px;

        // border:1px solid red;
        // position: relative;
        img {
          width: 70px;
          height: 70px;
          margin: 40px 30px 0;
        }
      }

    }
  }
}

// 类目热销榜
.categoryList {
  width: 375px;

  .moduleTitle {

    display: flex;
    // border: 1px solid green;
    height: 50px;
    line-height: 50px;
    font-size: 20px;

    .title {
      flex: left;
      padding: 0 15px;
    }
  }

  .content {
    padding: 0 10px 10px 15px;

    .line1 {
      display: flex;
      font-size: 14px;
      width: 100%;
      flex-wrap: wrap;

      .item-1 {
        display: flex;
        background-color: #f9f3e4;
        position: relative;
        // position: relative;
        margin: 0 5px 5px 0;
      }

      .item-2 {
        background-color: #ebeff6;
        display: flex;
        position: relative;
        // position: relative;
      }

      .item-big {
        // margin:0 5px 5px 0;
        // border: 1px solid red;
        height: 100px;
        width: 170px;
        overflow: hidden;

        // box-sizing: border-box;
        // border:1px solid red
        .name {
          display: inline-block;
          // position: absolute;
          width: 70px;
          height: 21px;
          justify-content: center;
          // border:1px solid green
          position: absolute;
          top: 30px;
          left: 8px
        }

        .item-img {
          width: 100px;
          height: 100px;
          position: absolute;
          right: 0;
          top: 0 // position: absolute;
        }
      }
    }

    .line2 {
      display: flex;
      flex-wrap: wrap;
      width: 350px;

      .item {
        width: 82.5px;
        height: 90px;
        background: #f5f5f5;
        border-radius: 5px;
        margin: 0 5px 5px 0;

        text-align: center;

        .name {
          font-size: 12px;
          width: 82.5px;
          height: 18px;
          line-height: 18px;
        }

        .item-img {
          width: 60px;
          height: 60px
        }
      }
    }
  }
}

// 为你精选
.wellChosen {
  .chosenTitle {
    color: #333;
    font-size: 18px;
    font-family: PingFang SC Source Han Sans CN;
    font-style: normal;
    font-weight: 700;
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .centerContent {
    background-color: #fff;
    margin-bottom: 10px;

    /* 列表标题 */
    .centerContentHeader {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      height: 60px;

      .text5 {
        font-size: 16px;
      }

      .text6 {
        margin-top: 6px;
        font-size: 12px;
        color: rgb(153, 153, 153);
      }
    }

    /* 详细商品卡片 */

    .contentList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      // 单个商品卡片
      .contentGoods {
        position: relative;
        width: 172.5px;
        padding-bottom: 26px;

        // 商品图片
        .contentGoodImg {
          width: 100%;
          height: 172.5px;
          border-radius: 10px;
        }

        .contentGoodText {
          font-size: 14px;
          line-height: 20px;

          .logo1 {
            height: 15px;
            position: relative;
            top: 2px;
          }

        }

        .contentGoodRedpaper {
          border: 1px solid #d6d6d6;
          border-radius: 10px;
          width: 62px;
          height: 15px;
          line-height: 15px;
          padding-left: 3px;
          vertical-align: middle;

          .logo2 {
            height: 10px;
            position: relative;
            top: 1px;
          }
        }

        .contentGoodPrice {
          color: #fa1e32;
          height: 30px;
          font-weight: bolder;

          .text1 {
            font-size: 20px;
          }

          .text2 {
            font-weight: normal;
            color: rgb(153, 153, 153);
            // font-style: ;
          }
        }

        .contentGoodActivity {
          position: relative;
          display: flex;
          height: 23px;
          align-items: center;
          padding: 0 3px;
          font-weight: bolder;
          border-radius: 10px;
          background-color: rgb(255, 233, 235);

          .Text3 {
            color: white;
            padding: 2px 5px;
            border-radius: 10px;
            background-color: rgb(350, 30, 50);
          }

          .Text4 {
            padding: 0 3px;
            color: rgb(250, 30, 50);
          }

          .logo3 {
            position: absolute;
            top: -6px;
            left: 13px;
          }
        }

        .logo4 {
          position: absolute;
          width: 52.5px;
          height: 27px;
          top: 5px;
          right: 5px;
        }
      }
    }
  }
}

//  新人专享礼
.newPerson {
  margin: 10px 0;
  width: 375px;
  box-sizing: border-box;

  .title {
    padding: 0 15px;
    // border: 1px solid green;
    position: relative;
    text-align: center;
    font-size: 15px;

    .txt {
      width: 80px;
      height: 45px;
      line-height: 45px;
      display: inline-block;

      &::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 12px;
        background-color: #333;
        left: 120px;
        top: 20px
      }

      &::after {
        content: "";
        position: absolute;
        height: 1px;
        width: 12px;
        background-color: #333;
        left: 235px;
        top: 20px
      }
    }
  }

  .content {
    width: 171.5px;
    height: 217px;
    display: flex;
    padding-left: 15px;

    .left {
      background-color: #f9e9cf;
      margin-right: 2px;

      .name {
        padding: 15px 0 0 15px;
        font-size: 14px;
        // background-color: #f9e9cf;
      }

      .imgwrap {
        margin: 18.5px 21.25px;

        .img {
          width: 129px;
          height: 128.5px;
        }
      }

    }

    .right {
      .line2 {
        position: relative;
        background: #ffecc2;
        ;
        border-radius: 4px;
        width: 156.5px;
        height: 97.5px;
        // float: left;
        padding: 10px 0 0 15px;
        margin: 0 2px 2px 0;

        .detail {
          position: absolute;
          right: 0;

          .discount {
            position: absolute;
            top: 5px;
            left: 40px;
            width: 40px;
            height: 40px;
            background: #f59524;
            border-radius: 50%;
            color: #fff;
            font-weight: 700;
            text-align: center;
            opacity: 0.8;

            .title {
              font-size: 12px;
              padding: 0px;
              margin-top: 5px;
            }

            .subtitle {
              font-size: 12px;
              text-decoration: line-through;
            }
          }

          .picture {
            width: 100px;
            height: 100px;

            .img {
              height: 100%;
              width: 100%;
            }
          }
        }

        .cnt {
          width: 156.5px;
          height: 42px;

          .title {
            padding: 0;
            text-align: left;
          }

          .subtitle {
            background-color: #cbb693;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            font-size: 12px;
            font-weight: 500;
            width: 65px;
          }
        }

      }

      .line1 {
        position: relative;
        background: #fbe2d3;
        border-radius: 4px;
        width: 156.5px;
        height: 97.5px;
        // float: left;
        padding: 10px 0 0 15px;
        margin: 0 2px 2px 0;

        .detail {
          position: absolute;
          right: 0;

          .discount {
            position: absolute;
            top: 5px;
            left: 40px;
            width: 40px;
            height: 40px;
            background: #f59524;
            border-radius: 50%;
            color: #fff;
            font-weight: 700;
            text-align: center;
            opacity: 0.8;

            .title {
              font-size: 12px;
              padding: 0px;
              margin-top: 5px;
            }

            .subtitle {
              font-size: 12px;
              text-decoration: line-through;
            }
          }

          .picture {
            width: 100px;
            height: 100px;

            .img {
              height: 100%;
              width: 100%;
            }
          }
        }

        .cnt {
          width: 156.5px;
          height: 42px;

          .title {
            padding: 0;
            text-align: left;
          }
        }

      }

      //  margin-bottom: 0.04rem;
    }
  }
}
</style>
